:root,
:host {
  --van-dropdown-menu-height: 48px;
  --van-dropdown-menu-background: var(--van-background-2);
  --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
  --van-dropdown-menu-title-font-size: 15px;
  --van-dropdown-menu-title-text-color: var(--van-text-color);
  --van-dropdown-menu-title-active-text-color: var(--van-primary-color);
  --van-dropdown-menu-title-disabled-text-color: var(--van-text-color-2);
  --van-dropdown-menu-title-padding: 0 var(--van-padding-xs);
  --van-dropdown-menu-title-line-height: var(--van-line-height-lg);
  --van-dropdown-menu-option-active-color: var(--van-primary-color);
  --van-dropdown-menu-option-disabled-color: var(--van-text-color-3);
  --van-dropdown-menu-content-max-height: 80%;
}

.van-dropdown-menu {
  user-select: none;

  &__bar {
    position: relative;
    display: flex;
    height: var(--van-dropdown-menu-height);
    background: var(--van-dropdown-menu-background);
    box-shadow: var(--van-dropdown-menu-shadow);

    &--opened {
      z-index: calc(var(--van-dropdown-item-z-index) + 1);
    }

    &--scrollable {
      padding-left: var(--van-padding-base);
      padding-right: var(--van-padding-xs);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  &__item {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-width: 0; // hack for flex ellipsis

    &--disabled {
      .van-dropdown-menu__title {
        color: var(--van-dropdown-menu-title-disabled-text-color);
      }
    }

    &--grow {
      flex: 1 0 auto;
      padding-left: var(--van-padding-base);
      padding-right: var(--van-padding-sm);
    }
  }

  &__title {
    position: relative;
    box-sizing: border-box;
    max-width: 100%;
    padding: var(--van-dropdown-menu-title-padding);
    color: var(--van-dropdown-menu-title-text-color);
    font-size: var(--van-dropdown-menu-title-font-size);
    line-height: var(--van-dropdown-menu-title-line-height);

    &::after {
      position: absolute;
      top: 50%;
      right: -4px;
      margin-top: -5px;
      border: 3px solid;
      border-color: transparent transparent var(--van-gray-4) var(--van-gray-4);
      transform: rotate(-45deg);
      opacity: 0.8;
      content: '';
    }

    &--active {
      color: var(--van-dropdown-menu-title-active-text-color);

      &::after {
        border-color: transparent transparent currentColor currentColor;
      }
    }

    &--down {
      &::after {
        margin-top: -1px;
        transform: rotate(135deg);
      }
    }
  }
}
